<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		[clock] {
			display: none;
		}
	</style>
</head>
<body>
	<div id="app">
		<!-- 双大括号 -->
		<p>原来：{{msg}}</p>
		<p>大写：{{msg.toUpperCase()}}</p>
		<p v-html="msg"></p>
		<p v-text="msg"></p>
		<p v-cloak>{{msg}}</p>
		<!-- 双向数据绑定 -->
		<input type="text" v-model="username">
		<p>hello {{username}}</p>
		<!-- 强制数据绑定v-bind:属性名="data名" -->
		<h2>
			<img :src="imgUrl">
		</h2>
		<!-- 事件监听 v-on：click='函数名',可传参 -->
		<h2>
			<button @click="test">111</button>
			<button v-on:click="test2('aaa')">222</button>
		</h2>
	</div>

	<script src="../vue.js"></script>
	<script>
		var vm = new Vue({
			el:'#app',
			data: {
				msg:'nihao',
				username:'', // 默认显示，可以为空
				imgUrl:'xxx.jpg' // 强制绑定后才能改路径，不然就只是文本

			},
			methods: {
				test:function() {
					alert(1);
				},
				test2:function(content) {
					alert(content);
				}
			}
		});

		vm.username = 1;
	</script>
</body>
</html>